<template>
    <component v-if="column.component !== undefined" :is="column.component(scope)"></component>
    <template v-else-if="column.type === 'switch'">
        <el-switch v-if="isSwitch === true" :model-value="propValue" @change="onChange"></el-switch>
        <el-tag v-else type="primary">{{ propValue === true ? '是' : '否' }}</el-tag>
    </template>
    <Icon v-else-if="column.type === 'icon'" :name="propValue"></Icon>
    <template v-else-if="column.type === 'tag'">
        <template v-if="Array.isArray(propValue)">
            <el-tag v-for="(tag, index) in propValue" :key="index" type="primary">{{ tag }}</el-tag>
        </template>
        <el-tag v-else-if="propValue" :type="column.default ?? 'primary'">
            {{ propValue }}
        </el-tag>
    </template>
    <template v-else-if="column.type === 'image'">
        <template v-if="Array.isArray(propValue)">
            <el-image
                v-for="(img, index) in propValue"
                :key="index"
                :initial-index="index"
                :hide-on-click-modal="true"
                :preview-teleported="true"
                :preview-src-list="[...propValue]"
                :src="img"
            ></el-image>
        </template>
        <el-image
            v-else-if="propValue"
            :hide-on-click-modal="true"
            :preview-teleported="true"
            :preview-src-list="[propValue]"
            :src="propValue"
        ></el-image>
    </template>
    <template v-else-if="column.type === 'datetime'">
        {{ useDateFormat(propValue, column.default ?? 'YYYY-MM-DD HH:mm:ss') }}
    </template>
    <template v-else-if="isBoolean(propValue)">
        {{ propValue === true ? '是' : '否' }}
    </template>
    <template v-else>
        {{ propValue }}
    </template>
</template>

<script setup lang="ts">
interface Props {
    scope: any
    isSwitch?: boolean
    column: TableColumnType<any>
}
const props = withDefaults(defineProps<Props>(), {
    isSwitch: true,
})

const propValue = computed(() => props.column.prop && getPropValue(props.scope.row, props.column.prop))
const getPropValue = (row: any, prop: any) => {
    return row[prop]
}
const emit = defineEmits(['onChange', 'onClick'])

const onClick = () => {
    emit('onClick', props.scope)
}
const onChange = () => {
    emit('onChange', props.scope)
}
</script>

<style lang="scss" scoped>
.drag-handle {
    cursor: move;
}
</style>
